<template>
  <div>
    <h2>成功案例</h2>
    <div class="success-case-container" ref="successCaseContainer">
      <CaseCard v-for="(item, index) in successData" :key="index" :img="item.img" :title="item.title"
        :description="item.description" :link="item.link" />
    </div>
    <ul class="case-control">
      <li v-for="(item, index) in successData" :key="index" :class="{ active: index === currentIndex }"
        @click="changeCase(index)"></li>
    </ul>
  </div>

</template>
<script setup lang="ts">
  import { onMounted, ref, useTemplateRef, type ShallowRef } from 'vue';
  import CaseCard from './CaseCard.vue';

  type SuccessStatus = {
    img: string
    title: string
    description: string
    link: string
  }

  const successCaseContainer = useTemplateRef('successCaseContainer') as ShallowRef<HTMLElement>

  const successData: SuccessStatus[] = [
    {
      link: '',
      img: '/public/lz/241459495vfp.png',
      title: '中软国际助力大型现代化酒店迁移上华为云，并提供智能运维服务',
      description: '中软国际为该大型现代化酒店客户提供了整体优化部署方案，缩短客户业务上线周期、加快数字化转型速度。为客户官网、PMS、CRS等系统设计上云迁移方案，利用华为云实现业务集中部署、资源集中管控，提升效率、降低成本。',
    },
    {
      link: '',
      img: '/public/lz/24151208gebg.png',
      title: '中软国际帮助大型通信基础设施服务企业快速迁移上云',
      description: '中软国际对准生产系统进行深入调研、科学分析，同时综合考虑迁移风险、运营成本等因素，最终决定基于华为云承载准生产系统，利用存储数据迁移、数据库迁移、中间件迁移、主机迁移等解决方案完成上云工作。'
    },
    {
      link: '',
      img: '/public/lz/241431178tje.jpg',
      title: '中软国际助力知名寿险企业核心数据库迁移上华为云，全面提升容灾水平',
      description: '中软国际基于多年的灾备经验，为客户设计跨城容灾解决方案，满足数据实时传输要求、缩短业务中断时间、简化容灾演练流程，提升容灾管理水平。',
    },
    {
      link: '',
      img: '/public/lz/31153149ukdf.png',
      title: '为知名坚果零食IP数字化智慧小镇打造业务中台',
      description: '松鼠小镇——基于坚果零食“国民品牌”三只松鼠IP延伸出来的娱乐休闲综合体，是执行APP出入园和一码通消费的数字化智慧小镇。以数字化推动文旅... ',
    },
    {
      link: '',
      img: '/public/lz/311503382ksh.jpeg',
      title: '医院智能体——全场景智慧、全要素协同、全业务运营',
      description: '广东省第二人民医院是全国首个省级应急医院，此次全场景智能医院项目是中软国际云智能业务集团与华为在智慧医疗领域合作的重要标杆项目，中软国... '
    },
    {
      link: '',
      img: '/public/lz/31095508huz2.jpeg',
      title: '行业领先的汽车租赁企业Azure DevOps In A Day项目',
      description: '客户是中国首家实现全程电子商务化管理的汽车租赁企业，成立多年来，始终处于稳健、高速发展的状态，出租率、周转率等重要指标均位居行业前列。... '
    },
    {
      link: '',
      img: '/public/lz/2309244055m4.png',
      title: '云上赋能 推动基因测序云化发展',
      description: '基因研究一直是整个科学领域的一大高地。天津某著名生物科技公司是一家专注于新一代基因组学技术在医学健康领域产业化开发和应用的高科技企业。...  '
    },
    {
      link: '',
      img: '/public/lz/09163636bsyn.jpg',
      title: '新零售——【智慧门店 + 云店 + 中台】 解决方案',
      description: '基于与华为云零售行业的合作实践，中软国际持续演绎而形成智慧门店、零售业务中台、零售数据中台等解决方案，并携手华为云参与五粮液公司云店与...'
    },
    {
      link: '',

      img: '/public/lz/091637153jj1.jpg',
      title: '基于WeLink的数字化办公升级',
      description: '中软国际致力于通过应用基于华为云的“0”风险迁移，企业通讯录双向同步，基于H5持续开发与集成，最终实现WeLink数字化办公升级。'
    },
    {
      link: '',
      img: '/public/lz/09154245ke1x.png',
      title: '张家港市智慧城市数字平台及城市大脑建设',
      description: '张家港新型智慧数字平台项目是中软国际云智能业务集团与华为同舟共济合作中在智慧城市领域中的重要标杆项目。'
    },
    {
      link: '',
      img: '/public/lz/09143833vu7d.png',
      title: '华为云学院鲲鹏中心',
      description: '中软国际教育科技集团配合人工智能学院设立华为云学院鲲鹏中心，该中心为全国第二家、江西省首家。'
    },
    {
      link: '',
      img: '/public/lz/05194210pjbw.jpg',
      title: '建设北京大兴国际机场（PKX）智慧数据中心，助力打造全球空港标杆',
      description: '北京大兴国际机场是国家重大战略工程和首都重大标志性工程，是首都机场集团建设“世界一流机场管理集团” 、“世界一流‘双枢纽’”、和“世界... '
    }
  ]

  const currentIndex = ref(0)

  let timer: number | undefined

  const changeCase = (index: number) => {
    const thisIndex = currentIndex.value
    const elWidth = successCaseContainer.value.children[thisIndex].clientWidth
    const scrollWidth = (index - thisIndex) * elWidth + (index - thisIndex) * 40
    if (index > thisIndex) {
      // 右滑
      successCaseContainer.value.scrollBy({
        left: scrollWidth,
        behavior: 'smooth'
      })
    } else if (index < thisIndex) {
      // 左滑
      successCaseContainer.value.scrollBy({
        left: scrollWidth,
        behavior: 'smooth'
      })
    } else {
      return
    }
    currentIndex.value = index
    //
    if (timer) {
      clearTimeout(timer)
      if (index === successData.length - 1) {
        index = -1
      }
      timer = setTimeout(() => {
        changeCase(++index)
      }, 2000)
    } else {
      timer = setTimeout(() => {
        changeCase(++index)
      }, 2000)
    }
  }

  onMounted(() => {
    changeCase(1)
  })

</script>
<style scoped>

  h2 {
    text-align: center;
    margin: 40px auto;
    letter-spacing: 10px;
  }

  .success-case-container {
    width: 80%;
    height: 380px;
    margin: 0 auto;
    padding: 10px;

    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
  }

  .case-control {
    height: 50px;
    width: 80%;
    margin: 0 auto;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;


    .active {
      background-color: #733;
    }

    li {
      cursor: pointer;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #ccc;
      transition: all 0.3s ease;
    }
  }

</style>
